<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
const [messageApi] = message.useMessage()
const info = () => {
  messageApi.info('欢迎进入花花农场')
}
const router = useRouter()
const WORD = [
  '欢迎来到花花农场，最近我都农场有很多淘气的老鼠，把我的田地都挖出了很多洞，你可以帮我把它们敲晕嘛？',
  '好的，我乐意为之！',
  '那我提醒你一下哦，当你开始的时候，你可以在设置打开音乐，老鼠可能会从一个洞出来多次哦，可以多次敲打哦！最好敲打老鼠的肚子，其他地方可能敲打不中哦',
  '好的呀！',
]
const index = ref(0)
const isFinish = computed(() => (index.value + 1 === WORD.length ? true : false))
const isFlower = computed(() => (index.value % 2 === 0 ? true : false))
const handleClickFinish = () => {
  info()
  router.push('/home')
}
onMounted(() => {
  if (
    navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i)
  )
    router.push('/error')
})
</script>
<template>
  <div class="front-page">
    <div class="front-content">
      <div class="img">
        <img v-if="isFlower" src="./../assets/flower.png" alt="" />
        <img
          v-else
          style="position: absolute; right: 0; height: 20vh"
          src="./../assets/little-girl.png"
          alt=""
        />
      </div>
      <div class="content">
        {{ WORD[index] }}
      </div>
      <div class="end-btn">
        <a-button v-if="index !== 0" style="margin-right: 40px" @click="index--">上一步</a-button>
        <a-button
          v-if="isFinish"
          style="background-color: rgb(200, 255, 100)"
          @click="handleClickFinish"
          >完成</a-button
        >
        <a-button v-else style="background-color: rgb(200, 255, 100)" @click="index++"
          >下一步</a-button
        >
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.front-page {
  display: flex;
  align-items: end;
  width: 100vw;
  height: 100vh;
  background: url('./../assets/front_background.png') no-repeat center center;
  background-size: 100% 100%;
  .front-content {
    width: 100%;
    padding-top: 60vh;
    height: 40vh;
    background: url('./../assets/board.jpg') no-repeat center center;
    background-size: 100% 100%;
    padding: 0 60px;
    .img {
      position: relative;
      padding: 3vw 0;
      height: 20vh;
      img {
        width: 10vh;
        height: 10vh;
      }
    }
    .content {
      font-size: 30px;
      height: 10vh;
    }
    .end-btn {
      text-align: end;
    }
  }
}
</style>
